<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直接均价计算模型</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            --transition: all 0.2s ease;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.4;
            color: #333;
            background-color: #f5f7fa;
            padding: 10px;
            font-size: 14px;
        }
        
        .container {
            display: grid;
            grid-template-columns: 15% 20% 60%;
            gap: 10px;
            justify-content: center;
            margin: 0 auto;
        }
        
        h2 {
            font-size: 1.2rem;
            color: var(--dark-color);
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--light-color);
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
            height: calc(100% - 15px);
        }
        
        .form-group {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        
        label {
            width: 200px;
            font-weight: 600;
            color: var(--dark-color);
            margin-right: 8px;
            font-size: 0.9rem;
        }
        
        input[type="text"],
        input[type="number"],
        select {
            padding: 6px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9rem;
            transition: var(--transition);
            width: 100%;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-right: 6px;
            margin-bottom: 6px;
            color: white;
        }
        
        .btn i {
            margin-right: 5px;
            font-size: 0.8em;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
        }
        
        .btn-success {
            background-color: var(--secondary-color);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
        }
        
        .btn-warning {
            background-color: var(--warning-color);
        }
        
        .btn-info {
            background-color: #17a2b8;
        }
        
        .btn-group {
            position: fixed;
            top: 50%;
            right: 10px;
            display: flex;
            flex-direction: column;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
            font-size: 0.9rem;
        }
        
        th, td {
            padding: 8px 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .highlight {
            background-color: #e3f2fd !important;
            font-weight: bold;
        }
        
        .result-value {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .summary {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 10px 0;
        }
        
        .summary-item {
            background: white;
            padding: 10px;
            border-radius: 6px;
            box-shadow: var(--shadow);
        }
        
        .summary-item h3 {
            font-size: 0.9rem;
            margin-bottom: 5px;
        }
        
        .summary-item p {
            font-weight: 600;
            color: var(--primary-color);
        }

        .formula-section {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            margin: 15px 0;
            border: 1px solid #ddd;
        }
        
        .formula-section p {
            margin-bottom: 5px;
            line-height: 1.5;
        }
        
        /* 打印样式 */
        @media print {
            .no-print, .btn-group {
                display: none !important;
            }
            
            body {
                background-color: white;
                padding: 0;
                font-size: 12pt;
            }
            
            .container {
                grid-template-columns: 1fr;
                gap: 0;
            }
            
            .card {
                box-shadow: none;
                border: 1px solid #ddd;
                margin-bottom: 10px;
                page-break-inside: avoid;
            }
            
            table {
                font-size: 10pt;
            }
            
            h2 {
                font-size: 14pt;
            }
        }
        
        @media (max-width: 1200px) {
            .container {
                grid-template-columns: 1fr;
            }
            
            .summary {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }
            
            label {
                width: 100%;
                margin-bottom: 3px;
            }
            
            .summary {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="formula-section print-section">
        <p><strong>价格评分计算公式：</strong></p>
        <p>价格评分 = (评标基准价 / 投标报价) × 价格权值 × 100%</p>
        <p>评标基准价：所有有效投标人报价平均值为评标基准价，其价格分为满分。越接近评标基准价得分越高。</p>
    </div>
    <div class="container">
        <div class="card">
            <h2>参数</h2>
            <div class="form-group">
                <label for="maxPrice">最高限价:</label>
                <input type="number" id="maxPrice" value="100">
            </div>
            <div class="form-group">
                <label for="priceWeight">价格权重(%):</label>
                <input type="number" id="priceWeight" value="30">
            </div>
        </div>
        
        <div class="card">
            <h2>投标人</h2>
            <table id="bidderTable">
                <thead>
                    <tr>
                        <th>投标人名称</th>
                        <th>投标报价</th>
                        <th class="no-print">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" value="投标人1" style="width:100%"></td>
                        <td><input type="number" value="90" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人2" style="width:100%"></td>
                        <td><input type="number" value="91" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人3" style="width:100%"></td>
                        <td><input type="number" value="92" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人4" style="width:100%"></td>
                        <td><input type="number" value="93" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人5" style="width:100%"></td>
                        <td><input type="number" value="94" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人6" style="width:100%"></td>
                        <td><input type="number" value="95" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人7" style="width:100%"></td>
                        <td><input type="number" value="96" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人8" style="width:100%"></td>
                        <td><input type="number" value="97" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人9" style="width:100%"></td>
                        <td><input type="number" value="98" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                    <tr>
                        <td><input type="text" value="投标人10" style="width:100%"></td>
                        <td><input type="number" value="99" style="width:100%"></td>
                        <td class="no-print"><button class="btn btn-danger" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div class="card" id="resultSection" style="display: none;">
            <h2>直接平均价评分法计算得分</h2>
            
            <div class="summary print-section">
                <div class="summary-item">
                    <h3>最高限价</h3>
                    <p id="maxPriceValue" class="result-value">0.00</p>
                </div>
                <div class="summary-item">
                    <h3>价格权重</h3>
                    <p id="priceWeightValue" class="result-value">0.00</p>
                </div>
                <div class="summary-item">
                    <h3>评标基准价</h3>
                    <p id="yBaseValue" class="result-value">0.00</p>
                </div>
                <div class="summary-item">
                    <h3>有效投标人数</h3>
                    <p id="validBiddersCount" class="result-value">0</p>
                </div>
            </div>
            
            <div style="overflow-x: auto;" class="print-section">
                <table id="resultTable">
                    <thead>
                        <tr>
                            <th>投标人名称</th>
                            <th>投标报价</th>
                            <th>评标基准价</th>
                            <th>价格权重(分值)</th>
                            <th>最终报价得分</th>
                            <th>与最高分差值</th>
                            <th>价格分排名</th>
                        </tr>
                    </thead>
                    <tbody id="resultBody">
                        <!-- 结果将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="btn-group">
        <button class="btn btn-primary" onclick="addBidder()"><i class="fas fa-user-plus"></i> 添加</button>
        <button class="btn btn-success" onclick="calculate()"><i class="fas fa-calculator"></i> 计算</button>
        <button class="btn btn-info" onclick="printPage()"><i class="fas fa-print"></i> 打印</button>
        <button class="btn btn-warning" onclick="resetForm()"><i class="fas fa-redo"></i> 重置</button>
    </div>

    <script>
        function addBidder() {
            const table = document.getElementById("bidderTable").getElementsByTagName('tbody')[0];
            const rowCount = table.rows.length;
            const newRow = table.insertRow();
            
            const cell1 = newRow.insertCell(0);
            const cell2 = newRow.insertCell(1);
            const cell3 = newRow.insertCell(2);
            
            cell1.innerHTML = `<input type="text" value="投标人${rowCount + 1}" style="width:100%">`;
            cell2.innerHTML = '<input type="number" style="width:100%">';
            cell3.innerHTML = '<button class="btn btn-danger no-print" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>';
        }
        
        function removeRow(button) {
            const row = button.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
        
        function resetForm() {
            document.getElementById("maxPrice").value = 100;
            document.getElementById("priceWeight").value = 30;
            
            const table = document.getElementById("bidderTable").getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            const values = [90, 91, 92, 93, 94, 95, 96, 97, 98, 99];
            for (let i = 1; i <= 10; i++) {
                const newRow = table.insertRow();
                const cell1 = newRow.insertCell(0);
                const cell2 = newRow.insertCell(1);
                const cell3 = newRow.insertCell(2);
                
                cell1.innerHTML = `<input type="text" value="投标人${i}" style="width:100%">`;
                cell2.innerHTML = `<input type="number" value="${values[i-1]}" style="width:100%">`;
                cell3.innerHTML = '<button class="btn btn-danger no-print" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>';
            }
            
            document.getElementById("resultSection").style.display = 'none';
        }
        
        function printPage() {
            window.print();
        }
        
        function calculate() {
            // 获取参数
            const maxPrice = parseFloat(document.getElementById("maxPrice").value);
            const priceWeight = parseFloat(document.getElementById("priceWeight").value);
            
            // 获取投标人数据
            const bidderTable = document.getElementById("bidderTable").getElementsByTagName('tbody')[0];
            const rows = bidderTable.rows;
            const bidders = [];
            
            for (let i = 0; i < rows.length; i++) {
                const name = rows[i].cells[0].getElementsByTagName('input')[0].value;
                const price = parseFloat(rows[i].cells[1].getElementsByTagName('input')[0].value);
                if (!isNaN(price) && price <= maxPrice) {
                    bidders.push({
                        name: name,
                        price: price
                    });
                }
            }
            
            if (bidders.length === 0) {
                alert("请输入至少一个有效的投标人报价！");
                return;
            }
            
            // 计算评标基准价（所有有效投标人报价的平均值）
            const sum = bidders.reduce((acc, curr) => acc + curr.price, 0);
            const yBase = sum / bidders.length;
            
            // 计算得分
            const results = [];
            
            for (let i = 0; i < bidders.length; i++) {
                const bidder = bidders[i];
                // 价格评分 = (评标基准价 / 投标报价) × 价格权值 × 100%
                const score = (yBase / bidder.price) * priceWeight;
                const roundedScore = Math.round(score * 100) / 100;
                
                results.push({
                    name: bidder.name,
                    price: bidder.price,
                    score: roundedScore
                });
            }
            
            // 计算与最高分的差值并排序
            const maxScore = Math.max(...results.map(r => r.score));
            results.forEach(r => {
                r.diff = Math.round((maxScore - r.score) * 100) / 100;
            });
            
            // 按得分从高到低排序
            results.sort((a, b) => b.score - a.score);
            
            // 添加排名
            results.forEach((r, index) => {
                r.rank = index + 1;
            });
            
            // 显示结果
            displayResults(results, maxPrice, priceWeight, yBase);
        }
        
        function displayResults(results, maxPrice, priceWeight, yBase) {
            const resultBody = document.getElementById("resultBody");
            resultBody.innerHTML = '';
            
            for (let i = 0; i < results.length; i++) {
                const result = results[i];
                const row = resultBody.insertRow();
                
                if (result.rank === 1) {
                    row.classList.add("highlight");
                }
                
                row.insertCell(0).textContent = result.name;
                row.insertCell(1).textContent = result.price.toFixed(2);
                row.insertCell(2).textContent = yBase.toFixed(2);
                row.insertCell(3).textContent = priceWeight.toFixed(2);
                row.insertCell(4).textContent = result.score.toFixed(2);
                row.insertCell(5).textContent = result.diff.toFixed(2);
                row.insertCell(6).textContent = result.rank;
            }
            
            document.getElementById("maxPriceValue").textContent = maxPrice.toFixed(2);
            document.getElementById("priceWeightValue").textContent = priceWeight.toFixed(2);
            document.getElementById("yBaseValue").textContent = yBase.toFixed(2);
            document.getElementById("validBiddersCount").textContent = results.length;
            
            document.getElementById("resultSection").style.display = 'block';
            
            // 平滑滚动到结果部分
            document.getElementById("resultSection").scrollIntoView({ behavior: 'smooth' });
        }
    </script>
</body>
</html>